// pages/index/index.tsx
import React, { useState } from 'react'
import { View, Text } from '@tarojs/components'
import {Button, Dialog, Input} from "@nutui/nutui-react-taro";
import HeaderTitle from "@/components/HeaderTitle";
import balanceIcon from '@/assets/balance.png'
import orderIcon from '@/assets/icon_order.png'
import myIcon from '@/assets/icon_my.png'
import './index.scss'
import Taro from "@tarojs/taro";
import UserService from "@/shared/services/user/user.service";
import {loadingService} from "@/shared/utils/loading";


const Index: React.FC = () => {
  const [phone, setPhone] = useState('')
  const [money, setMoney] = useState('48')
  const [visible, setVisible] = useState(false)

  const toSave = () => {
    if(!phone || !money || phone.length != 11){
      Taro.showToast({
        title: '请输入手机号和金额',
        icon: 'none'
      })
      return
    }
    setVisible(true)
  }

  const confirmSave = async () => {
    setVisible(false)
    loadingService.show({})
    const response = await UserService.cost({
      phone: phone,amount: money
    })

    loadingService.hide()
    if(response.code == 0){
      Taro.showToast({
        title: '消费成功',
        icon: 'none'
      })
    }
  }

  return (
    <View className="pageContainer">
      {/* Header */}
      <View className='order-header'>
        <HeaderTitle title={'手动消费'} />
      </View>

      <View>
        <Input placeholder="请输入手机号" value={phone}
               onChange={(val) => setPhone(val)}/>
        <Input placeholder="请输入消费金额" value={money}
               onChange={(val) => setMoney(val)}/>
        <View className='confirm'>
          <Button
            block={true}
            className='to-save'
            onClick={toSave}
            type='primary'
            color='#121214'
          >确定</Button>
        </View>
      </View>
      <Dialog
        title="消费确认"
        visible={visible}
        onConfirm={confirmSave}
        onCancel={() => setVisible(false)}
      >
        确认给手机号{phone}消费{money}元吗? 消费成功后会生成一笔订单
      </Dialog>
    </View>
  )
}

export default Index
